/*
 * @Author: xiaobai123-4 1713951641@qq.com
 * @Date: 2025-03-26 10:29:02
 * @LastEditors: xiaobai123-4 1713951641@qq.com
 * @LastEditTime: 2025-04-01 11:37:53
 * @FilePath: \electronicBulletinBoard\src\components\EditableHeader.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState } from 'react';
import { Resizable } from 'react-resizable';
import GridViewIcon from '@mui/icons-material/GridView';
import { Box, TextField } from "@mui/material";

export default function PDFGridTitle({ title: _title }) {

  const [hoverItem, setHoverItem] = useState(false);
  const [title, settitle] = useState(_title);
  return (
    <Resizable
      width={600}
      height={40}      // 初始高度（必需）
    >
      <Box sx={{
        width: '100%',
        height: '100%',
        color: 'text.primary',
        bgcolor: 'background.default',
        display: 'inline-flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }} onDoubleClick={() => {
        setHoverItem(!hoverItem)
      }} >
        <GridViewIcon className="react-grid-drag-box" sx={{ padding: '0 6px' }} />
        {
          hoverItem === true ? (
            <TextField
              sx={{
                width:'calc(100% - 60px)',
                height: '100%',
              }}
              label="标题"
              hiddenLabel="true"
              variant="standard"
              defaultValue={title}
              onChange={(e) => { settitle(e.target.value) }} />
          ) : (
            <Box sx={{
              flex: 1,
              lineHeight: '50px',
              textAlign: 'center',
              fontWeight: 'bold',
              fontSize: '20px',
              borderRadius: '4px'
            }}>{title}</Box>
          )
        }
      </Box>
    </Resizable>
  );
}